<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">通知公告</small>
      </a>
    </header>
    <main>
      <div v-loading='loading'>
        <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore">
          <ul class="datalist">
            <li v-for="(item,index) in listData" :key='item.unid'>
              <a @click="KJSJdetail(item)">
                <div class="rn-h1">{{item.title}}</div>
                <div class="rn-footer">
                  <i class="el-icon-time"></i><span class="rn-domainTime">{{item.createDate}}</span>
                </div>
              </a>
            </li>
          </ul>
        </v-loadmore>
        <div class="none_data" v-show="nonedata">
          <img src="../../img/tip.png">
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    Loadmore
  } from 'mint-ui';
  import {
    PublicNotice
  } from '../../api/api';
  export default {
    components: {
      'v-loadmore': Loadmore,
    },
    data() {
      return {
          loading:true,
        PageSize: 5,
        CurrentPage: 1,
        CriteriaList: [],
        listData: [],
        seachtext: '',
        select: '',
        scrollMode: "auto",
        nonedata: false
      };
    },
      watch: {
        listData(val) {
            if (val) {
                this.loading = false;
            }
        },
    },
    methods: {
      KJSJdetail: function(item) {
        this.$router.push({
          name: 'PublicNoticedetail'
        })
        sessionStorage.setItem('PublicNoticedetail', JSON.stringify({
          content: item,
        }));
      },
      loadTop: function() { //组件提供的下拉触发方法  
        //下拉刷新
        if (this.CurrentPage >= 0) {
          this.CurrentPage = 1;
          this.listData = [];
          this.getData();
        } else {
          this.listData = [];
          this.getData();
        }
        this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
      },
      loadBottom: function() {
        // 上拉加载  
        this.CurrentPage += 1;
        this.getData();
        // 上拉触发的分页查询  
        this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
      },
      //搜索
  
      //数据加载方法
      getData() {
        let CurrentPageNum = this.CurrentPage
        //定义需要传给通讯的参数：QueryData{"PageSize":10,"CurrentPage":1,"Query":{"CriteriaList":[]}}和userunid    
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: this.CurrentPage,
          Query: {
            CriteriaList: []
          }
        }
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData)
          }
        }
        //调取接口
        PublicNotice(options).then((res) => {
          if (res.success === true) {
            this.listData = this.listData.concat(res.data);
            if (res.data.length > 0) {
              this.nonedata = false
            } else {
              if (CurrentPageNum == 1) {
                this.nonedata = true
              } else {
                this.nonedata = false
              }
            }
          }
        })
      }
    },
  
    //页面加载时候
    mounted() {
      this.getData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .rn-h1 {
    font-size: 1rem;
    color: #333;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .rn-footer {
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    color: #999;
    flex-wrap: wrap;
    align-items: center;
    height: 13px;
    font-size: 13px;
    margin-top: 0.5rem;
    i {
      vertical-align: inherit;
      margin-right: 0.5rem
    }
  }
</style>
